<template>
  <div>
    <!-- 标题 -->
    <el-row type="flex" justify="start" align="middle">
      <label class="main_title">Equipment/Unit PI Monitor</label>
    </el-row>

    <el-row type="flex" >
      <!-- 左边3部分 -->
      <el-col :span="11">
        <el-row :gutter="20">
          <el-col :span="22" style="margin-left:20px">
            <!-- 3个选择器 -->
            <el-row :gutter="5">
              <el-col :span="3">
                <el-button circle icon="el-icon-arrow-left" @click="backToLastPage()"></el-button>
              </el-col>

              <el-col :span="6">
                <el-select
                  v-model="defaultvalue_Department"
                  :placeholder="placeholder"
                  @change="secondSelect"
                >
                  <el-option
                    v-for="item in dept_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>

              <el-col :span="6">
                <el-select
                  v-model="defaultvalue_AreaLine"
                  :placeholder="placeholder"
                  @change="thirdSelect"
                >
                  <el-option
                    v-for="item in default_area_line_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>

              <el-col :span="6">
                <el-select v-model="defaultvalue_Unit" :placeholder="placeholder">
                  <el-option
                    v-for="item in default_unit_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-button circle icon="el-icon-search" @click="showTableInf()"></el-button>
              </el-col>
            </el-row>

            <!-- 卡片信息 -->
            <el-row class="card_row">
              <el-card shadow="always">
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div>
                      <label class="second_row_title">当前订单号</label>
                    </div>
                  </el-col>
                  <el-col :span="4" :offset="4">
                    <div>
                      <label class="second_row_title">当前批次号</label>
                    </div>
                  </el-col>
                  <el-col :span="4" :offset="4">
                    <div>
                      <label class="second_row_title">当前品牌</label>
                    </div>
                  </el-col>
                </el-row>

                <br>
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div>
                      <label class="second_row_info">1564</label>
                    </div>
                  </el-col>
                  <el-col :span="4" :offset="4">
                    <div>
                      <label class="second_row_info">996</label>
                    </div>
                  </el-col>
                  <el-col :span="4" :offset="4">
                    <div>
                      <label class="second_row_info">百威</label>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-row>

            <!-- 表格 -->
            <el-row style="margin-top:15px">
              <el-card shadow="always">
                <el-table
                  class="msg_table"
                  :data="tableData"
                  style="width: 100%"
                  :header-cell-style="{'text-align':'center','font-weight':'bold','font-size':'130%'}"
                  :row-style="{'height':'0px','color':'grey'}" 
                  :cell-style="{'padding':'7px','text-align':'center','font-size':'130%'}"
                  :height="tableHeight"
                >
                  <el-table-column prop="pi" label="PI"></el-table-column>
                  <el-table-column prop="parameter" label="Parameter"></el-table-column>
                  <el-table-column prop="value" label="Value"></el-table-column>
                  <el-table-column prop="status" label="Status"></el-table-column>
                </el-table>
              </el-card>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <!-- echarts -->
      <el-col :span="13">
        <div @drop="drop1($event)" @dragover="allowDrop($event)">
          <el-card shadow="always">
            <el-row>
              <div class="charts" id="echart_div_01" style="height: 300px"></div>
            </el-row>
          </el-card>
        </div>

        <br>
        <br>
        <div @drop="drop2($event)" @dragover="allowDrop($event)">
          <el-card shadow="always">
            <el-row>
              <div class="charts" id="echart_div_02" style="height: 300px"></div>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
let echarts = require("echarts");
// let dom = null;
// let row_index = null;
export default {
  data() {
    return {
      tableHeight: "520",
      //================三个选择器的数据==============
      defaultvalue_Department: "",
      defaultvalue_AreaLine: "",
      defaultvalue_Unit: "",
      placeholder: "请选择",

      dept_options: [
        {
          value: "brew_dept",
          label: "酿造"
        },
        {
          value: "packing_dept",
          label: "包装"
        }
      ],

      default_area_line_options: [{}],
      area_line_options: [
        [
          {
            value: "糖化",
            label: "糖化"
          },
          {
            value: "发酵",
            label: "发酵"
          },
          {
            value: "清酒",
            label: "清酒"
          }
        ],

        [
          {
            value: "BL01",
            label: "BL01"
          },
          {
            value: "BL02",
            label: "BL02"
          },
          {
            value: "BL03",
            label: "BL03"
          },
          {
            value: "CL01",
            label: "CL01"
          },
          {
            value: "CL02",
            label: "CL02"
          }
        ]
      ],

      default_unit_options: [{}],
      unit_options: [
        //酿造部门
        [
          [
            {
              value: "酿造糖化1",
              label: "酿造糖化1"
            },
            {
              value: "酿造糖化2",
              label: "酿造糖化2"
            }
          ],
          [
            {
              value: "酿造发酵1",
              label: "酿造发酵1"
            },
            {
              value: "酿造发酵2",
              label: "酿造发酵2"
            }
          ],
          [
            {
              value: "酿造清酒1",
              label: "酿造清酒1"
            },
            {
              value: "酿造清酒2",
              label: "酿造清酒2"
            }
          ]
        ],
        //包装部门
        [
          [
            {
              value: "包装BL01_1",
              label: "包装BL01_1"
            },
            {
              value: "包装BL01_2",
              label: "包装BL01_2"
            }
          ],

          [
            {
              value: "包装BL02_1",
              label: "包装BL02_1"
            },
            {
              value: "包装BL02_2",
              label: "包装BL02_2"
            }
          ],

          [
            {
              value: "包装BL03_1",
              label: "包装BL03_1"
            },
            {
              value: "包装BL03_2",
              label: "包装BL03_2"
            }
          ],

          [
            {
              value: "包装CL01_1",
              label: "包装CL01_1"
            },
            {
              value: "包装CL01_2",
              label: "包装CL01_2"
            }
          ],

          [
            {
              value: "包装CL02_1",
              label: "包装CL02_1"
            },
            {
              value: "包装CL02_2",
              label: "包装CL02_2"
            }
          ]
        ]
      ],

      // =============表格数据============
      tableData: [
        {
          pi: "2016-05-03",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-02",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-04",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-01",
          parameter: "王小猫",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-08",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-06",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        },
        {
          pi: "2016-05-07",
          parameter: "王小虎",
          value: "上海",
          status: "普陀区"
        }
      ],

      //=================echarts 数据=================
      data1: [
        [
          ["2000-06-05", 116],
          ["2000-06-06", 129],
          ["2000-06-07", 135],
          ["2000-06-08", 86],
          ["2000-06-09", 73],
          ["2000-06-10", 85],
          ["2000-06-11", 73],
          ["2000-06-12", 68],
          ["2000-06-13", 92],
          ["2000-06-14", 130],
          ["2000-06-15", 245],
          ["2000-06-16", 139],
          ["2000-06-17", 115],
          ["2000-06-18", 111],
          ["2000-06-19", 309],
          ["2000-06-20", 206],
          ["2000-06-21", 137],
          ["2000-06-22", 128],
          ["2000-06-23", 85],
          ["2000-06-24", 94],
          ["2000-06-25", 71],
          ["2000-06-26", 106],
          ["2000-06-27", 84],
          ["2000-06-28", 93],
          ["2000-06-29", 85],
          ["2000-06-30", 73],
          ["2000-07-01", 83],
          ["2000-07-02", 125],
          ["2000-07-03", 107],
          ["2000-07-04", 82],
          ["2000-07-05", 44],
          ["2000-07-06", 72],
          ["2000-07-07", 106],
          ["2000-07-08", 107],
          ["2000-07-09", 66],
          ["2000-07-10", 91],
          ["2000-07-11", 92],
          ["2000-07-12", 113],
          ["2000-07-13", 107],
          ["2000-07-14", 131],
          ["2000-07-15", 111],
          ["2000-07-16", 64],
          ["2000-07-17", 69],
          ["2000-07-18", 88],
          ["2000-07-19", 77],
          ["2000-07-20", 83],
          ["2000-07-21", 111],
          ["2000-07-22", 57],
          ["2000-07-23", 55],
          ["2000-07-24", 60]
        ],
        [
          ["2000-06-05", 50],
          ["2000-06-06", 50],
          ["2000-06-07", 50],
          ["2000-06-08", 50],
          ["2000-06-09", 50],
          ["2000-06-10", 50],
          ["2000-06-11", 50],
          ["2000-06-12", 68],
          ["2000-06-13", 92],
          ["2000-06-14", 130],
          ["2000-06-15", 245],
          ["2000-06-16", 139],
          ["2000-06-17", 115],
          ["2000-06-18", 111],
          ["2000-06-19", 309],
          ["2000-06-20", 206],
          ["2000-06-21", 137],
          ["2000-06-22", 128],
          ["2000-06-23", 85],
          ["2000-06-24", 94],
          ["2000-06-25", 71],
          ["2000-06-26", 106],
          ["2000-06-27", 84],
          ["2000-06-28", 93],
          ["2000-06-29", 85],
          ["2000-06-30", 73],
          ["2000-07-01", 83],
          ["2000-07-02", 125],
          ["2000-07-03", 107],
          ["2000-07-04", 82],
          ["2000-07-05", 44],
          ["2000-07-06", 72],
          ["2000-07-07", 106],
          ["2000-07-08", 107],
          ["2000-07-09", 66],
          ["2000-07-10", 91],
          ["2000-07-11", 92],
          ["2000-07-12", 113],
          ["2000-07-13", 107],
          ["2000-07-14", 131],
          ["2000-07-15", 111],
          ["2000-07-16", 64],
          ["2000-07-17", 69],
          ["2000-07-18", 88],
          ["2000-07-19", 77],
          ["2000-07-20", 83],
          ["2000-07-21", 111],
          ["2000-07-22", 57],
          ["2000-07-23", 55],
          ["2000-07-24", 60]
        ],
        [
          ["2000-06-05", 100],
          ["2000-06-06", 100],
          ["2000-06-07", 100],
          ["2000-06-08", 100],
          ["2000-06-09", 100],
          ["2000-06-10", 100],
          ["2000-06-11", 100],
          ["2000-06-12", 100],
          ["2000-06-13", 92],
          ["2000-06-14", 130],
          ["2000-06-15", 245],
          ["2000-06-16", 139],
          ["2000-06-17", 115],
          ["2000-06-18", 111],
          ["2000-06-19", 309],
          ["2000-06-20", 206],
          ["2000-06-21", 137],
          ["2000-06-22", 128],
          ["2000-06-23", 85],
          ["2000-06-24", 94],
          ["2000-06-25", 71],
          ["2000-06-26", 106],
          ["2000-06-27", 84],
          ["2000-06-28", 93],
          ["2000-06-29", 85],
          ["2000-06-30", 73],
          ["2000-07-01", 83],
          ["2000-07-02", 125],
          ["2000-07-03", 107],
          ["2000-07-04", 82],
          ["2000-07-05", 44],
          ["2000-07-06", 72],
          ["2000-07-07", 106],
          ["2000-07-08", 107],
          ["2000-07-09", 66],
          ["2000-07-10", 91],
          ["2000-07-11", 92],
          ["2000-07-12", 113],
          ["2000-07-13", 107],
          ["2000-07-14", 131],
          ["2000-07-15", 111],
          ["2000-07-16", 64],
          ["2000-07-17", 69],
          ["2000-07-18", 88],
          ["2000-07-19", 77],
          ["2000-07-20", 83],
          ["2000-07-21", 111],
          ["2000-07-22", 57],
          ["2000-07-23", 55],
          ["2000-07-24", 60]
        ],
        [
          ["2000-06-05", 150],
          ["2000-06-06", 150],
          ["2000-06-07", 150],
          ["2000-06-08", 150],
          ["2000-06-09", 150],
          ["2000-06-10", 150],
          ["2000-06-11", 150],
          ["2000-06-12", 68],
          ["2000-06-13", 92],
          ["2000-06-14", 130],
          ["2000-06-15", 245],
          ["2000-06-16", 139],
          ["2000-06-17", 115],
          ["2000-06-18", 111],
          ["2000-06-19", 309],
          ["2000-06-20", 206],
          ["2000-06-21", 137],
          ["2000-06-22", 128],
          ["2000-06-23", 85],
          ["2000-06-24", 94],
          ["2000-06-25", 71],
          ["2000-06-26", 106],
          ["2000-06-27", 84],
          ["2000-06-28", 93],
          ["2000-06-29", 85],
          ["2000-06-30", 73],
          ["2000-07-01", 83],
          ["2000-07-02", 125],
          ["2000-07-03", 107],
          ["2000-07-04", 82],
          ["2000-07-05", 44],
          ["2000-07-06", 72],
          ["2000-07-07", 106],
          ["2000-07-08", 107],
          ["2000-07-09", 66],
          ["2000-07-10", 91],
          ["2000-07-11", 92],
          ["2000-07-12", 113],
          ["2000-07-13", 107],
          ["2000-07-14", 131],
          ["2000-07-15", 111],
          ["2000-07-16", 64],
          ["2000-07-17", 69],
          ["2000-07-18", 88],
          ["2000-07-19", 77],
          ["2000-07-20", 83],
          ["2000-07-21", 111],
          ["2000-07-22", 57],
          ["2000-07-23", 55],
          ["2000-07-24", 60]
        ],
        [
          ["2000-06-05", 200],
          ["2000-06-06", 200],
          ["2000-06-07", 200],
          ["2000-06-08", 200],
          ["2000-06-09", 200],
          ["2000-06-10", 200],
          ["2000-06-11", 200],
          ["2000-06-12", 200],
          ["2000-06-13", 92],
          ["2000-06-14", 130],
          ["2000-06-15", 245],
          ["2000-06-16", 139],
          ["2000-06-17", 115],
          ["2000-06-18", 111],
          ["2000-06-19", 309],
          ["2000-06-20", 206],
          ["2000-06-21", 137],
          ["2000-06-22", 128],
          ["2000-06-23", 85],
          ["2000-06-24", 94],
          ["2000-06-25", 71],
          ["2000-06-26", 106],
          ["2000-06-27", 84],
          ["2000-06-28", 93],
          ["2000-06-29", 85],
          ["2000-06-30", 73],
          ["2000-07-01", 83],
          ["2000-07-02", 125],
          ["2000-07-03", 107],
          ["2000-07-04", 82],
          ["2000-07-05", 44],
          ["2000-07-06", 72],
          ["2000-07-07", 106],
          ["2000-07-08", 107],
          ["2000-07-09", 66],
          ["2000-07-10", 91],
          ["2000-07-11", 92],
          ["2000-07-12", 113],
          ["2000-07-13", 107],
          ["2000-07-14", 131],
          ["2000-07-15", 111],
          ["2000-07-16", 64],
          ["2000-07-17", 69],
          ["2000-07-18", 88],
          ["2000-07-19", 77],
          ["2000-07-20", 83],
          ["2000-07-21", 111],
          ["2000-07-22", 57],
          ["2000-07-23", 55],
          ["2000-07-24", 60]
        ]
      ],

      // =================行号=======
      row_index: "",
      eChart1_row_index: "0",
      eChart2_row_index: "1"

      // return
    };
  },

  mounted() {
    this.init();
    this.rowDrag();
  },

  methods: {
    init() {
      let echart1 = echarts.init(document.getElementById("echart_div_01"));
      let echart2 = echarts.init(document.getElementById("echart_div_02"));
      // 日期
      let dateList0 = this.data1[this.eChart1_row_index].map(function(item) {
        return item[0];
      });
      // 数据
      let valueList0 = this.data1[this.eChart1_row_index].map(function(item) {
        return item[1];
      });
      let dateList1 = this.data1[this.eChart2_row_index].map(function(item) {
        return item[0];
      });
      // 数据
      let valueList1 = this.data1[this.eChart2_row_index].map(function(item) {
        return item[1];
      });

      //=========echarts1============
      let option1 = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400
          }
        ],

        title: [
          {
            left: "center",
            text: this.tableData[this.eChart1_row_index].parameter
          }
        ],
        tooltip: {
          trigger: "axis"
        },
        xAxis: [
          {
            data: dateList0
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: false
            }
          }
        ],
        grid: [
          {
            bottom: "10%"
          }
        ],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList0
          }
        ]
      };
      echart1.setOption(option1);

      //=========echarts2============
      echart2.setOption({
        title: [
          {
            left: "center",
            text: this.tableData[this.eChart2_row_index].parameter
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            saveAsImage: {}
          },
          x: 800
        },
        legend: {
          //图表上方的类别显示
          show: true,
          data: []
        },
        axisPointer: {
          link: {
            xAxisIndex: "all"
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            top: 242, //关于位置的几个数据要根据装echart的div合理设置
            left: 80,
            xAxisIndex: [0]
          },
          {
            type: "inside",
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0]
          }
        ],
        //坐标系位置和占比例
        grid: [
          {
            left: 80,
            height: "50%"
          }
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              onZero: true
            },
            data: []
          }
        ],
        yAxis: [
          {
            // name: '单位: L',
            type: "value"
            //max : 500
          }
        ],
        series: [
          {
            //name:'速率',
            type: "line",
            data: []
          },
          {
            type: "line",
            data: []
          }
        ]
      });

      echart2.setOption({
        xAxis: {
          data: dateList1
        },
        series: [
          {
            name: "速率图",
            data: valueList1
          }
        ]
      });
    },
    //========================================

    //======================拖拽功能=========================
    rowDrag() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      for (var i = 0; i < tbody.children.length; i++) {
        tbody.children[i].setAttribute("draggable", true);
        tbody.children[i].addEventListener("dragstart", this.drag);
      }
    },
    drag(event) {
      // dom = event.srcElement.children[0].children[0].innerText
      this.row_index = event.srcElement.rowIndex;
    },
    allowDrop(event) {
      event.preventDefault();
    },
    drop1(event) {
      event.preventDefault();
      // console.log(row_index)
      // console.log( this.eChart1_row_index)
      this.eChart1_row_index = this.row_index;
      this.init();
    },
    drop2(event) {
      event.preventDefault();
      // console.log(row_index)
      // console.log( this.eChart2_row_index)
      this.eChart2_row_index = this.row_index;
      this.init();
    },
    backToLastPage() {
      this.$router.push("/area_line_overview");
    },
    secondSelect(value) {
      // this.defaultvalue_AreaLine = this.placeholder;
      for (var i = 0; i < this.dept_options.length; i++) {
        if (value == this.dept_options[i].value) {
          this.default_area_line_options = this.area_line_options[i];
          tag = i;
          break;
        }
      }
    },
    thirdSelect(value) {
      for (var i = 0; i < this.default_area_line_options.length; i++) {
        if (value == this.default_area_line_options[i].value) {
          this.default_unit_options = this.unit_options[tag][i];
          break;
        }
      }
    },
    //实现表格自适应高度
    calHeight() {
      this.tableHeight = window.innerHeight * 0.9 * 0.62;
      // console.log(this.tableHeight)
    }
  },
  beforeMount() {
    this.calHeight();
  }
};
let tag = 0; //用于3级联动之间的通信
</script>

<style lang="less" scoped>
.main_title {
  font-size: 32px;
  font-family: Arial;
  float: left;
  margin: 20px;
}
.card_row {
  margin-top: 15px;
  background-color: white;
  border-radius: 5px;
}
.second_row_title {
  font-size: 15px;
  font-family: Arial;
  color: grey;
}
.second_row_info {
  font-size: 23px;
  font-family: Arial;
  color: #14d288;
}
.msg_table {
  /deep/.el-table__body-wrapper {
    cursor: move;
    cursor: -webkit-grabbing;
    overflow: auto;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    border-radius: 10px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
}
.charts {
  overflow: auto;
}
</style>
